<template>
  <div class="mybox">
    <div class="leftbg" @click="leftClick"></div>
    <div class="mydiv" ref="cont">
      <div class="btmcard">
        <div class="btmbox">
          <div class="toptitle ">{{ twobox.field_name }}</div>
          <div class="centerdata ">
            <div class="value">{{ twobox.field_value }}</div>
            <div class="unit">{{ twobox.unit }}</div>
          </div>
          <div class="btmdata">
            <div class="box" :class="[checkSigns(twobox.growth_value)]"></div>
            <div class="btmvalue" :class="[checkSign(twobox.growth_value)]">{{ twobox.growth_value }}%</div>
          </div>
        </div>
        <div class="btmbox newbox">
          <div class="toptitle newtitle ">金融机构本外币存款余额</div>
          <div class="centerdata ">
            <div class="value">{{ threebox.field_value }}</div>
            <div class="unit">{{ threebox.unit }}</div>
          </div>
          <div class="btmdata">
            <div class="box" :class="[checkSigns(threebox.growth_value)]"></div>
            <div class="btmvalue" :class="[checkSign(threebox.growth_value)]">{{ threebox.growth_value }}%</div>
          </div>
        </div>
        <div class="btmbox">
          <div class="toptitle">{{ threebox.field_name }}</div>
          <div class="centerdata ">
            <div class="value">{{ threebox.field_value }}</div>
            <div class="unit">{{ threebox.unit }}</div>
          </div>
          <div class="btmdata">
            <div class="box" :class="[checkSigns(threebox.growth_value)]"></div>
            <div class="btmvalue" :class="[checkSign(threebox.growth_value)]">{{ threebox.growth_value }}%</div>
          </div>
        </div>
        <div class="btmbox">
          <div class="toptitle">{{ threebox.field_name }}</div>
          <div class="centerdata ">
            <div class="value">{{ threebox.field_value }}</div>
            <div class="unit">{{ threebox.unit }}</div>
          </div>
          <div class="btmdata">
            <div class="box" :class="[checkSigns(threebox.growth_value)]"></div>
            <div class="btmvalue" :class="[checkSign(threebox.growth_value)]">{{ threebox.growth_value }}%</div>
          </div>
        </div>
        <div class="btmbox">
          <div class="toptitle">{{ threebox.field_name }}</div>
          <div class="centerdata ">
            <div class="value">{{ threebox.field_value }}</div>
            <div class="unit">{{ threebox.unit }}</div>
          </div>
          <div class="btmdata">
            <div class="box" :class="[checkSigns(threebox.growth_value)]"></div>
            <div class="btmvalue" :class="[checkSign(threebox.growth_value)]">{{ threebox.growth_value }}%</div>
          </div>
        </div>
        <div class="btmbox">
          <div class="toptitle">{{ threebox.field_name }}</div>
          <div class="centerdata ">
            <div class="value">{{ threebox.field_value }}</div>
            <div class="unit">{{ threebox.unit }}</div>
          </div>
          <div class="btmdata">
            <div class="box" :class="[checkSigns(threebox.growth_value)]"></div>
            <div class="btmvalue" :class="[checkSign(threebox.growth_value)]">{{ threebox.growth_value }}%</div>
          </div>
        </div>
        <div class="btmbox">
          <div class="toptitle">{{ threebox.field_name }}</div>
          <div class="centerdata ">
            <div class="value">{{ threebox.field_value }}</div>
            <div class="unit">{{ threebox.unit }}</div>
          </div>
          <div class="btmdata">
            <div class="box" :class="[checkSigns(threebox.growth_value)]"></div>
            <div class="btmvalue" :class="[checkSign(threebox.growth_value)]">{{ threebox.growth_value }}%</div>
          </div>
        </div>
        <div class="btmbox">
          <div class="toptitle">{{ threebox.field_name }}</div>
          <div class="centerdata ">
            <div class="value">{{ threebox.field_value }}</div>
            <div class="unit">{{ threebox.unit }}</div>
          </div>
          <div class="btmdata">
            <div class="box" :class="[checkSigns(threebox.growth_value)]"></div>
            <div class="btmvalue" :class="[checkSign(threebox.growth_value)]">{{ threebox.growth_value }}%</div>
          </div>
        </div>
      </div>
    </div>
    <div class="rightbg" @click="rightClick"></div>
  </div>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
export default {
  name: '',
  data () {
    return {
      onebox: {},
      twobox: {},
      threebox: {}
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    leftClick () {
      this.$refs.cont.scrollLeft -= 410
    },
    rightClick () {
      this.$refs.cont.scrollLeft += 410
    },
    checkSigns (numStr) {
      const num = parseFloat(numStr)
      return num >= 0 ? 'red' : 'green'
    },
    checkSign (numStr) {
      const num = parseFloat(numStr)
      return num >= 0 ? 'pos' : 'neg'
    },
    initData () {
      getAction('/topic/data/listAllBySql/dy_dp_msjc_fczz_gk', { count_type: '全市' }).then(res => {
        if (res.success) {
          this.onebox = res.result[0]
          this.twobox = res.result[1]
          this.threebox = res.result[2]
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mybox {
  display: flex;

  .leftbg {
    width: 18px;
    height: 22px;
    background: url('./img/3.png')no-repeat center center;
    margin-top: 111px;
    cursor: pointer;
  }

  .rightbg {
    width: 18px;
    height: 22px;
    background: url('./img/4.png')no-repeat center center;
    margin-top: 111px;
    cursor: pointer;
  }

  .box {
    width: 10px;
    height: 16px;
    margin-right: 5px;
    margin-top: 3px;

    &.red {
      background: url('../right/img/bgc.png')no-repeat center center;
      background-size: 100% 100%;
    }

    &.green {
      background: url('../right/img/bgc1.png')no-repeat center center;
      background-size: 100% 100%;
    }
  }

  .toptitle {
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    width: 150px;
    margin: 0 auto;
    margin-bottom: 10px;
  }

  .newtitle {
    margin-bottom: 0px;
  }

  .centerdata {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 166px;
    height: 29px;
    background: url('./img/2.png');

    .value {
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 20px;
      color: #FDDE02;
    }

    .unit {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #F1F1F1;
      margin-top: 5px;
      margin-left: 5px;
    }
  }


  .btmdata {
    display: flex;
    justify-content: center;

    .btmtitle {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      margin-right: 7px;
    }

    .btmvalue {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 16px;

      &.pos {
        color: #FE3D3D;
      }

      &.neg {
        color: #03f842;
      }
    }
  }

  .mydiv {
    overflow: hidden;
    transition: scroll 0.5s ease-in-out;
  }

  .btmcard {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: calc(410px *2);
    height: 250px;


    .btmbox {
      width: 178px;
      height: 112px;
      background: url('./img/1.png');
      padding-top: 23px;
      margin-bottom: 10px;
    }

    .newbox {
      padding-top: 10px;
    }

  }
}
</style>
